<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>

    <title>文件上传</title>
</head>
<body class="skin-default">

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card padding-15">
                <h3>演示一个业务对多个文件的上传:</h3>
                <button type="button" isShow="" class="btn btn-primary" onclick="uploadBusinessFile()">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;文件上传
                </button>
                <br>
                <br>
                <p class="font-red">
                    <h3>一个业务的多个文件回显演示:</h3>
                    <br>注意: 业务编号推荐使用 "业务名称(例如:user)_数据唯一标识(例如:主键值)"
                    <br>目前已知的支持预览的文件类型有: txt,pdf
                </p>

                <br/>
                <br/>
                <div id="list_file" style="color: blue;"></div>
            </div>
        </div>
    </div>
</div>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>

<!--上传插件-->
<link href="/static/plugin/webuploader-0.1.5/webuploader.css" rel="stylesheet">
<script src="/static/plugin/webuploader-0.1.5/webuploader.js"></script>
<script src="/static/js/upload.js"></script>
<script type="text/javascript">
    //上传文件
    function uploadBusinessFile(){
        jo.uploadFile("{URL_FS}fs/file/upload?businessCode=test_123", function (success, file, json) {
            if(success && json.code == 0){
                jo.showMsg("上传成功!", {icon:1});
            }else{
                jo.showMsg("上传失败!", {icon:2});
            }
            jo.closeUploadDialog();//关闭文件上传窗口
            loadFiles();//重新加载
        }, {/*UPLOAD_FILE_TYPES:'pdf,txt,doc', */fileNumLimit:5});
    }
    $(function(){
        loadFiles();
    });
    //回显文件
    function loadFiles(){
        jo.postAjax('{URL_FS}fs/fileInfo/getFileInfoListByBusinessCode', {businessCode:'test_123'}, function(json){
            if(json && json.code == 0 && json.data){
                var _html = '';
                for(var i=0;i<json.data.length;i++){
                    var item = json.data[i];
                    _html += '<div>'+(i+1)+'. '+item.name+'&nbsp;&nbsp;&nbsp;&nbsp;' +
                            '<a class="cursor-hand" onclick="downloadFile(\''+item.id+'\')">下载</a>&nbsp;&nbsp;&nbsp;&nbsp;' +
                            '<a class="cursor-hand" onclick="jo.newWindow(\'{URL_FS}fs/file/preview/'+item.id+'\')">预览</a>&nbsp;&nbsp;&nbsp;&nbsp;' +
                            '</div>';
                }
                $('#list_file').html(_html);
            }
        }, true);
    }
</script>

</body>
</html>
